Progressiivse veebirakenduse süvalinkimine: URL-põhine rakenduse oleku taastamine

Progressiivsed veebirakendused (PWA-d) on muutnud revolutsiooniliselt viisi, kuidas me veebirakendusi kogeme. Nad ühendavad endas parimad omadused natiivsetest rakendustest ja veebi juurdepääsetavusest, pakkudes võrguühenduseta võimekust, tõuketeateid ja sujuvat kasutajakogemust. Üks oluline aspekt PWA kasutajakogemuse parandamisel on süvalinkimise rakendamine koos tõhusa oleku taastamisega.

Mis on süvalinkimine?

Süvalinkimine on võime kasutada URL-i, et suunata kasutajad mobiilirakenduses või PWA-s kindlasse asukohta või sisu juurde. Selle asemel, et lihtsalt avada rakenduse avaekraan, võib süvalink viia kasutaja otse tootelehele, seadete ekraanile või mis tahes muule konkreetsele sisule. PWA-de kontekstis tähendab süvalinkimine, et URL mitte ainult ei käivita PWA-d, vaid taastab ka rakenduse oleku, et see vastaks kasutaja oodatud kontekstile.

Miks on süvalinkimine PWA-de jaoks oluline?

Süvalinkimine on oluline mitmel põhjusel:

• Täiustatud kasutajakogemus: Kasutajad pääsevad konkreetsele sisule kohe juurde, ilma et peaksid kogu rakenduses navigeerima. See on ülioluline tänapäeva kiires digitaalses maailmas, kus kasutajad ootavad kohest rahuldust.
• Parem kaasatus: Süvalingid turunduskampaaniates, sotsiaalmeedia postitustes või e-posti uudiskirjades võivad suunata kasutajad otse PWA-s oleva asjakohase sisu juurde, suurendades kaasatust ja konversioone.
• Sujuv jagamine: Kasutajad saavad hõlpsalt jagada konkreetset sisu PWA-s teistega lihtsa URL-i kaudu. Seejärel saab saaja otse juurdepääsu samale sisule oma PWA eksemplaris.
• SEO eelised: PWA-d indekseeritakse otsingumootorite poolt ja süvalingid võimaldavad otsingumootoritel rakenduses olevat konkreetset sisu roomata ja indekseerida, parandades nähtavust ja otsingutulemuste järjestust.
• Rakenduse oleku säilitamine: Korralikult rakendatud süvalinkimine võib säilitada rakenduse oleku, tagades, et kasutajakogemus jääb järjepidevaks isegi pärast rakenduse sulgemist ja taasavamist süvalingi kaudu. See on ülimalt oluline keerukate rakenduste või töövoogude puhul.

Rakenduse oleku ja taastamise mõistmine

Rakenduse olek viitab andmetele, mis määratlevad teie PWA hetkeoleku. See võib hõlmata:

• Hetkel kuvatav leht või vaade.
• Ostukorvi sisu.
• Kasutaja sisestus vormis.
• Lehe kerimisasend.
• Autentimise staatus.

Rakenduse oleku taastamine tähendab, et kui kasutaja avab PWA süvalingi kaudu, viiakse rakendus tagasi täpselt samasse olekusse, milles see oli lingi loomise hetkel. See on sujuva ja intuitiivse kasutajakogemuse jaoks ülioluline. Kujutage ette, et kasutaja täidab pikka vormi; kui ta sulgeb rakenduse ja avab selle uuesti ilma korraliku oleku taastamiseta, peaks ta alustama otsast peale. Süvalinkimine koos rakenduse oleku taastamisega lahendab selle probleemi.

Kuidas rakendada PWA süvalinkimist koos rakenduse oleku taastamisega

Süvalinkimise rakendamine koos rakenduse oleku taastamisega hõlmab mitut sammu:

1. Määratlege oma URL-i struktuur

Hästi määratletud URL-i struktuur on tõhusa süvalinkimise jaoks ülioluline. Mõelge, kuidas teie rakenduse sisu ja funktsionaalsus vastavad konkreetsetele URL-idele. Kasutage järjepidevat ja loogilist struktuuri, mida on lihtne mõista ja hooldada.

Näide:

Kaaluge e-kaubanduse PWA-d. Teie URL-i struktuur võib välja näha selline:

• / (Avaleht)
• /products (Kõikide toodete nimekiri)
• /products/<product-id> (Spetsiifiline tooteleht, nt /products/123)
• /cart (Ostukorv)
• /checkout (Ostuprotsess)
• /profile (Kasutajaprofiil)

Keerukama olekuhalduse jaoks saate kasutada päringuparameetreid:

• /products?category=electronics (Toodete nimekiri kategoorias "electronics")
• /search?q=keyword (Otsingutulemused sõnale "keyword")

2. Töödelge sissetulevaid URL-e

Teie PWA peab suutma sissetulevaid URL-e töödelda ja eraldada vajaliku teabe rakenduse oleku taastamiseks. Tavaliselt hõlmab see JavaScripti kasutamist URL-i parsimiseks ja rakenduse oleku vastavaks värskendamiseks. Peamine koht sissetulevate URL-ide töötlemiseks on teie PWA põhirakenduse loogikas või ruuteris.

Näide JavaScripti kasutades:

            
function handleDeepLink() {
  const url = new URL(window.location.href);
  const path = url.pathname;

  switch (path) {
    case '/products':
      // Display the list of products
      displayProducts();
      break;
    case '/cart':
      // Display the shopping cart
      displayCart();
      break;
    default:
      if (path.startsWith('/products/')) {
        const productId = path.split('/').pop();
        // Display the details of the specified product
        displayProductDetails(productId);
      } else {
        // Display the home page
        displayHomePage();
      }
  }

  // Handle query parameters
  const category = url.searchParams.get('category');
  if (category) {
    // Filter products by category
    filterProductsByCategory(category);
  }

  const searchQuery = url.searchParams.get('q');
  if (searchQuery) {
    // Perform a search
    performSearch(searchQuery);
  }
}

// Call handleDeepLink when the app loads
handleDeepLink();

// Listen for changes in the URL (using the History API)
window.addEventListener('popstate', handleDeepLink);

            

              
                Copy
              
            
          

See näide demonstreerib, kuidas URL-i parsida ja rakenduse olekut värskendada tee ja päringuparameetrite alusel. Funktsioon handleDeepLink kutsutakse välja rakenduse laadimisel ja alati, kui URL muutub (rakendusesisese navigeerimise tõttu). Pange tähele sündmusekuulaja popstate kasutamist. See on oluline brauseri tagasi/edasi nuppude navigeerimise käsitlemiseks teie PWA-s.

3. Salvestage ja taastage rakenduse olek

Rakenduse oleku tõhusaks taastamiseks on vaja mehhanismi vajalike andmete salvestamiseks ja nende toomiseks, kui rakendus süvalingi kaudu uuesti avatakse. Selleks saab kasutada mitut meetodit, millest igaühel on oma eelised ja puudused.

Lokaalne salvestusruum (Local Storage)

Lokaalne salvestusruum on lihtne ja mugav viis väikeste andmemahtude salvestamiseks kasutaja brauserisse. See sobib ideaalselt selliste asjade hoidmiseks nagu kasutaja eelistused, autentimismärgid või väikese ostukorvi sisu. Siiski on lokaalsel salvestusruumil piiratud maht ja seda ei tohiks kasutada suurte või tundlike andmete jaoks.

Näide Local Storage kasutades:

            
// Store the current product ID
localStorage.setItem('currentProductId', productId);

// Restore the product ID
const currentProductId = localStorage.getItem('currentProductId');
if (currentProductId) {
  displayProductDetails(currentProductId);
}

            

              
                Copy
              
            
          

Sessiooni salvestusruum (Session Storage)

Sessiooni salvestusruum sarnaneb lokaalse salvestusruumiga, kuid andmeid hoitakse ainult kasutaja sessiooni vältel. Kui kasutaja sulgeb brauseri vahekaardi või akna, kustutatakse andmed automaatselt. Sessiooni salvestusruum sobib ajutiste andmete hoidmiseks, mida pole vaja mitme sessiooni vältel.

Küpsised (Cookies)

Küpsised on väikesed tekstifailid, mis salvestatakse kasutaja arvutisse. Neid kasutatakse sageli kasutaja tegevuse jälgimiseks ja eelistuste salvestamiseks. Siiski on küpsistel mitmeid piiranguid, sealhulgas väike salvestusmaht ja potentsiaalsed privaatsusprobleemid. Kaasaegsed PWA-d eelistavad küpsiste asemel sageli kasutada Local Storage'it või IndexedDB-d.

IndexedDB

IndexedDB on võimsam ja paindlikum salvestuslahendus kui lokaalne salvestusruum või küpsised. See on NoSQL-andmebaas, mis võimaldab teil salvestada suuri koguseid struktureeritud andmeid kasutaja brauserisse. IndexedDB sobib ideaalselt keeruka rakenduse oleku salvestamiseks, näiteks suure ostukorvi sisu, kasutajaprofiilide või võrguühenduseta andmete jaoks.

Näide IndexedDB kasutades:

            
// Open a database
const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.error('Error opening database:', event);
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // Store the current product details
  const transaction = db.transaction(['products'], 'readwrite');
  const objectStore = transaction.objectStore('products');
  const addRequest = objectStore.put({ id: productId, name: productName, price: productPrice });

  addRequest.onsuccess = function(event) {
    console.log('Product added to database');
  };

  // Retrieve the product details
  const getRequest = objectStore.get(productId);

  getRequest.onsuccess = function(event) {
    const product = event.target.result;
    if (product) {
      displayProductDetails(product.id, product.name, product.price);
    }
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('products', { keyPath: 'id' });
};

            

              
                Copy
              
            
          

See näide näitab, kuidas avada IndexedDB andmebaas, salvestada toote üksikasjad ja neid hiljem kätte saada. Sündmust onupgradeneeded kasutatakse objektide poe loomiseks, kui see veel ei eksisteeri.

Teenindustöötajad ja vahemällu salvestamine (Service Workers and Caching)

Teenindustöötajad (Service Workers) saavad võrgupäringuid kinni püüda ja serveerida vahemällu salvestatud vastuseid, võimaldades teie PWA-l töötada võrguühenduseta või piiratud ühenduvusega. Neid saab kasutada ka rakenduse oleku salvestamiseks ja taastamiseks. Vajalike andmete vahemällu salvestamisega saate tagada, et rakendus jääb funktsionaalseks ka siis, kui kasutaja on võrguühenduseta.

4. Käsitsege erinevaid stsenaariume

Süvalinkimise ja rakenduse oleku taastamise rakendamisel on oluline käsitleda erinevaid stsenaariume sujuvalt:

• Rakendus pole installitud: Kui kasutaja klõpsab süvalingil, kuid PWA pole installitud, peaksite ta suunama PWA installimislehele (nt rakenduste poodi või PWA avalehele koos installimissoovitusega). Kaaluge viitstardega süvalinkimise kasutamist (vt allpool).
• Rakendus juba töötab: Kui PWA juba töötab taustal, peaksite selle esiplaanile tooma ja rakenduse oleku taastama. See võib nõuda meetodi clients.matchAll() kasutamist teie teenindustöötajas olemasoleva PWA eksemplari leidmiseks.
• Vigane või aegunud süvalink: Kui süvalink on vigane või aegunud, peaksite kasutajale kuvama veateate ja suunama ta PWA-s asjakohasele lehele (nt avalehele või otsingutulemuste lehele).
• Load: PWA-d nõuavad sageli kasutaja lube (asukoht, kaamera, teated). Käsitsege lubade taotlusi sujuvalt ja selgitage, miks need on vajalikud süvalingiga seotud konkreetse funktsionaalsuse jaoks.

Süvalinkimise täiustatud tehnikad

Lisaks põhitõdedele on siin mõned täiustatud tehnikad teie PWA süvalinkimise võimekuse parandamiseks:

Viitstardega süvalinkimine (Deferred Deep Linking)

Viitstardega süvalinkimine võimaldab teil jälgida kasutajaid, kes klõpsavad süvalingil *enne* PWA installimist. Kui kasutaja installib ja avab PWA esmakordselt, saate viitstardega süvalingi kätte saada ja suunata nad kavandatud sisu juurde. See on eriti kasulik turunduskampaaniate jaoks.

Kuidas see töötab:

1. Kasutaja klõpsab süvalingil (nt reklaamis).
2. Kui PWA pole installitud, suunatakse ta rakenduste poodi või PWA avalehele.
3. Jälgimisteenus salvestab süvalingi teabe (nt küpsisesse või lokaalsesse salvestusruumi).
4. Kui kasutaja installib ja avab PWA, hangib rakendus salvestatud süvalingi teabe.
5. Rakendus navigeerib kasutaja kavandatud sisu juurde.

Mitmed kolmanda osapoole teenused pakuvad viitstardega süvalinkimise lahendusi.

Veebirakenduse manifesti kasutamine

Veebirakenduse manifest (manifest.json) annab brauserile teavet teie PWA kohta, sealhulgas selle nime, ikoonid ja algus-URL-i. Saate manifestis kasutada atribuuti start_url, et määrata URL, mis tuleks avada, kui PWA käivitatakse avaekraanilt. Seda saab kasutada põhilise süvalinkimise funktsionaalsuse rakendamiseks.

Näide:

            
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/products/123",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

            

              
                Copy